/* 初始化样式
------------------------------- */
:root {
  // 按钮的颜色
  --hs-color-black: #000;
  --hs-color-white: #fff;
  --hs-color-primary: #409eff;
  --hs-color-warning: #eebe77;
  --hs-color-danger: #de4949;
  --hs-color-success: #0a861f;

  // 边框颜色
  --hs-border-color: #f1f2f3;

  // 悬浮颜色
  --hs-color-hover-lightblue: #eaf0f3;
  --hs-color-hover: #f0f2f5;
  --hs-color-hover-rgba: rgb(237, 239, 241);

  // 文字颜色
  --hs-text-lightblue: #d0e2eb;
  --hs-text-blue: #5c9cd8;

  // 菜单颜色
  --hs-color-lightblue: #d0e2eb;
  --hs-color-blue: #5c9cd8;
}

* {
  margin: 0;
  padding: 0;
  // padding 和 border 的值算在指定宽高内部的
  box-sizing: border-box;
  // 如 Dropdown 下拉菜单，隐藏点击会出现蓝色边框
  outline: none !important;
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  // font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
}

/* NavMenu 导航菜单
------------------------------- */
.el-menu {
  border-right: none !important;

  &.el-menu--collapse {
    // 展开菜单时平滑
    transition: width 1ms ease;
  }
}

// 表格区域
.el-main {
  --el-main-padding: 16px 16px;
}

// 搜索按钮
.search-btn {
  background-color: #F2F3F5 !important;
  color: #1D2129 !important;

  &:hover {
    background-color: #ffffff !important;
    color: #316c72 !important;
  }
}

// 重置按钮
.reset-btn {
  color: #FFFFFF !important;
  background-color: #316c72 !important;

  &:hover {
    background-color: #eef4f5 !important;
    color: #316c72 !important;
  }
}

// 页面的功能按钮
.tab-func-btn {
  background-color: #316c72 !important;
  color: #ffffff !important;
  border-radius: 4px 4px 4px 4px;

  &:hover {
    background-color: rgb(16, 104, 255, 0.1) !important;
    color: #316c72 !important;
  }
}

/* dialog弹框
------------------------------- */
.el-dialog.is-draggable {
  .el-dialog__header.show-close {
    border-bottom: 1px solid #8ea9ad !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;

    span {
      color: #316c72 !important;
    }
  }

  .el-dialog__body {
    // background: #fcfcfc !important;
    border-radius: 5px;
  }

  .el-dialog__footer {
    margin-top: 20px;
    border-top: 1px solid #8ea9ad !important;
  }
}

/* 表格样式
------------------------------- */
.table-con {
  width: 100%;
  border: 1px solid #F2F3F5;
  border-radius: 4px;
  overflow: auto;

  .el-tag {
    width: 60px;
  }

  :deep(.el-table__row>.is-left) {
    .cell {
      display: flex;
      align-items: center;
    }
  }
}

/* 组件进入动画
------------------------------- */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.4s ease;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(10px);
}